<?php if(!class_exists("View", false)) exit("no direct access allowed");?>

        <!-- 主内容区 -->
        <main class="flex-1 ml-64 flex flex-col h-screen overflow-hidden">
            <?php include $_view_obj->compile("main_header.html"); ?>
            
            <!-- 内容区域 -->
            <div class="flex-1 overflow-y-auto p-6 scrollbar-thin">
                <!-- 筛选区域 -->
                <div class="bg-white rounded-xl shadow-sm border border-neutral-200 p-5 mb-6">
                    <div class="flex flex-wrap items-center justify-between gap-4">
                        <div class="flex flex-wrap items-center gap-4">
                            <div class="relative">
                                <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="timeRangeFilter">
                                    <option value="today">今日</option>
                                    <option value="yesterday">昨日</option>
                                    <option value="7days">近7天</option>
                                    <option value="30days" selected>近30天</option>
                                    <option value="custom">自定义</option>
                                </select>
                                <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                            </div>
                            
                            <div class="relative" id="dateRangePicker" style="display: none;">
                                <input type="date" class="bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="startDate">
                                <span class="mx-2 text-neutral-400">至</span>
                                <input type="date" class="bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="endDate">
                            </div>
                            
                            <div class="relative">
                                <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="contentTypeFilter">
                                    <option value="all">全部内容类型</option>
                                    <option value="media">媒体</option>
                                    <option value="collection">合集</option>
                                    <option value="comment">言论</option>
                                    <option value="certification">认证</option>
                                    <option value="report">举报</option>
                                </select>
                                <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                            </div>
                        </div>
                        
                        <div>
                            <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="refreshData">
                                <i class="fa fa-refresh mr-1"></i> 刷新数据
                            </button>
                            <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors ml-2" id="exportData">
                                <i class="fa fa-download mr-1"></i> 导出报表
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 核心统计指标 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    <div class="stat-card">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <p class="text-neutral-500 text-sm">总审核量</p>
                                <h3 class="text-2xl font-bold mt-1" id="totalAuditCount">12,847</h3>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                        <div class="flex items-center text-sm">
                            <span class="text-success flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 12.5%
                            </span>
                            <span class="text-neutral-400 ml-2">较上期</span>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <p class="text-neutral-500 text-sm">审核通过量</p>
                                <h3 class="text-2xl font-bold mt-1" id="approvedCount">9,635</h3>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-check"></i>
                            </div>
                        </div>
                        <div class="flex items-center text-sm">
                            <span class="text-success flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 8.2%
                            </span>
                            <span class="text-neutral-400 ml-2">较上期</span>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <p class="text-neutral-500 text-sm">审核拒绝量</p>
                                <h3 class="text-2xl font-bold mt-1" id="rejectedCount">3,212</h3>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center text-danger">
                                <i class="fa fa-times"></i>
                            </div>
                        </div>
                        <div class="flex items-center text-sm">
                            <span class="text-danger flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 5.3%
                            </span>
                            <span class="text-neutral-400 ml-2">较上期</span>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <p class="text-neutral-500 text-sm">平均处理时间</p>
                                <h3 class="text-2xl font-bold mt-1" id="avgHandleTime">4.2 分钟</h3>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-clock"></i>
                            </div>
                        </div>
                        <div class="flex items-center text-sm">
                            <span class="text-success flex items-center">
                                <i class="fa fa-arrow-down mr-1"></i> 12.8%
                            </span>
                            <span class="text-neutral-400 ml-2">较上期</span>
                        </div>
                    </div>
                </div>
                
                <!-- 审核趋势图 -->
                <div class="chart-container">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-bold">审核量趋势</h3>
                        <div class="flex space-x-2">
                            <button id="dayBtn" class="chart-period-btn bg-primary/10 text-primary text-xs px-3 py-1 rounded-full" data-period="day">按日</button>
                            <button id="weekBtn" class="chart-period-btn bg-neutral-100 text-neutral-500 text-xs px-3 py-1 rounded-full" data-period="week">按周</button>
                            <button id="monthBtn" class="chart-period-btn bg-neutral-100 text-neutral-500 text-xs px-3 py-1 rounded-full" data-period="month">按月</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="auditTrendChart"></canvas>
                    </div>
                </div>
                
                <!-- 审核结果分布和审核类型分布 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <div class="chart-container">
                        <h3 class="font-bold mb-6">审核结果分布</h3>
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="auditResultPieChart"></canvas>
                        </div>
                    </div>
                    
                    <div class="chart-container">
                        <h3 class="font-bold mb-6">内容类型分布</h3>
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="contentTypePieChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 审核员工作表现 -->
                <div class="chart-container">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-bold">审核员工作表现</h3>
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="auditorStatType">
                                <option value="completed">完成量</option>
                                <option value="speed">处理速度</option>
                                <option value="accuracy">准确率</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full" id="auditorStatsTable">
                            <thead>
                                <tr class="bg-neutral-50 text-left">
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">排名</th>
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">审核员</th>
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">完成量</th>
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">通过量</th>
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">拒绝量</th>
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">平均处理时间</th>
                                    <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">准确率</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-neutral-200 bg-white" id="auditorStatsTableBody">
                                <!-- 数据将通过JS动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 敏感内容分析 -->
                <div class="chart-container">
                    <h3 class="font-bold mb-6">敏感内容类型分布</h3>
                    <div class="h-64">
                        <canvas id="sensitiveTypeChart"></canvas>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="/i/js/audit.statics.js"></script>